<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 2px solid #aaa;
        }

        button.active {
            color: #fff;
            background-color: #007acc;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <br>
    <button id="boldBtn" type="button">粗线条</button>
    <button id="thinBtn" type="button" class="active">细线条</button>
    <button id="saveBtn" type="button">保存签名</button>
    <input type="color" id="color" name="" value="">
    <button class="clearBtn">橡皮擦</button>
    <button class="nullBtn">清空画布</button>
    <script>
        let boldBtn = document.getElementById("boldBtn"),
            thinBtn = document.getElementById("thinBtn"),
            saveBtn = document.getElementById("saveBtn"),
            inputColor = document.getElementById("color"),
            clearBtn = document.getElementsByClassName("clearBtn")[0],
            nullBtn = document.getElementsByClassName("nullBtn")[0]

        /** @type {HTMLCanvasElement} */
        let canvas = document.getElementById("canvas")
        let ctx = canvas.getContext("2d")

        // 提升画笔圆润度
        ctx.lineJoin = "round"
        ctx.lineCap = "round"

        // 画线
        let isDraw = false
        canvas.onmousedown = function (e) {
            isDraw = true
            ctx.beginPath()
            // 确定起点
            let x = e.pageX - canvas.offsetLeft
            let y = e.pageY - canvas.offsetTop
            ctx.moveTo(x, y)
        }
        canvas.onmouseup = function () {
            isDraw = false
        }
        canvas.onmouseleave = function () {
            isDraw = false
        }
        canvas.onmousemove = function (e) {
            if (isDraw) {
                let x = e.pageX - canvas.offsetLeft
                let y = e.pageY - canvas.offsetTop
                ctx.lineTo(x, y)
                ctx.stroke()
            }
        }

        // 粗线
        boldBtn.onclick = function () {
            ctx.globalCompositeOperation = "source-over"
            ctx.lineWidth = 10
            boldBtn.classList.add('active')
            thinBtn.classList.remove('active')
            clearBtn.classList.remove('active')
        }

        // 细线
        thinBtn.onclick = function () {
            ctx.globalCompositeOperation = "source-over"
            ctx.lineWidth = 1
            boldBtn.classList.remove('active')
            clearBtn.classList.remove('active')
            thinBtn.classList.add('active')
        }

        // 橡皮擦
        clearBtn.onclick = function () {
            thinBtn.classList.remove('active')
            boldBtn.classList.remove('active')
            clearBtn.classList.add('active')
            ctx.globalCompositeOperation = "destination-out"
            ctx.lineWidth = 30
        }

        // 清空画布
        nullBtn.onclick = function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
        }

        // 保存为图片
        saveBtn.onclick = function () {
            // 将canvas转为src路径
            let urlData = canvas.toDataURL()

            // 展示为图片
            // let img = new Image()
            // img.src = urlData
            // document.body.appendChild(img)

            // 设置为下载链接
            let downloadA = document.createElement("a")
            let currTime = new Date()
            downloadA.setAttribute("download", `签名-${+currTime}`)
            downloadA.href = urlData
            downloadA.click()
        }

        // 画笔颜色修改
        inputColor.onchange = function (e) {
            ctx.strokeStyle = inputColor.value
        }
    </script>
</body>

</html>